<template>
  <div class="app-container system-info-page">
    <el-row :gutter="20">
      <el-col :span="6">
        <SystemInfoChart
          :title="'CPU监控'"
          :chartTitle="'CPU当前总使用率'"
          :percent="cpu.percent"
        ></SystemInfoChart>
      </el-col>
      <el-col :span="6">
        <SystemInfoChart
          :title="'内存信息'"
          :chartTitle="'内存使用率'"
          :percent="mem.percent"
        ></SystemInfoChart>
      </el-col>
      <el-col :span="6">
        <SystemInfoChart
          :title="'存储信息'"
          :chartTitle="'存储使用率'"
          :percent="disk.percent"
        ></SystemInfoChart>
      </el-col>
      <el-col :span="6">
        <NetInfoCom
          :bytesRecv="net.bytesRecv"
          :bytesSent="net.bytesSent"
        ></NetInfoCom>
      </el-col>
    </el-row>
    <el-row class="system-info-item" :gutter="20">
      <el-col :span="24">
        <div class="system-info-title1">
          <span>CPU监控</span>
        </div>
        <div class="system-info-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="CPU名称">
              {{ cpu.modeName }}
            </el-descriptions-item>
            <el-descriptions-item label="CPU数量">
              {{ cpu.cnt }}颗物理CPU
            </el-descriptions-item>
            <el-descriptions-item label="CPU物理核心数">
              {{ cpu.logicalCnt }}个物理核心
            </el-descriptions-item>
            <el-descriptions-item label="CPU逻辑核心数">
              {{ cpu.physicalCnt }}个逻辑核心
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
    <el-row class="system-info-item" :gutter="20">
      <el-col :span="24">
        <div class="system-info-title1">
          <span>服务器信息</span>
        </div>
        <div class="system-info-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="服务器名称">
              {{ host.hostName }}
            </el-descriptions-item>
            <el-descriptions-item label="服务器操作系统">
              {{ host.os }}
            </el-descriptions-item>
            <el-descriptions-item label="服务器IP">
              {{
                host.ipList && host.ipList.length ? host.ipList.join(",") : ""
              }}
            </el-descriptions-item>
            <el-descriptions-item label="服务器架构">
              {{ host.kernelArch }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row class="system-info-item" :gutter="20">
      <el-col :span="18">
        <div class="system-info-title1">
          <span>JVM信息</span>
        </div>
        <div class="system-info-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="JVM名称">
              {{ cpu.modeName }}
            </el-descriptions-item>
            <el-descriptions-item label="JVM版本">
              {{ cpu.cnt }}颗物理CPU
            </el-descriptions-item>
            <el-descriptions-item label="JVM启动时间">
              {{ cpu.logicalCnt }}个物理核心
            </el-descriptions-item>
            <el-descriptions-item label="JVM运行时长">
              {{ cpu.physicalCnt }}个逻辑核心
            </el-descriptions-item>
            <el-descriptions-item label="JVM运行时长">
              {{ cpu.physicalCnt }}个逻辑核心
            </el-descriptions-item>
            <el-descriptions-item label="JVM运行时长">
              {{ cpu.physicalCnt }}个逻辑核心
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
      <el-col :span="6">
        <SystemInfoChart
          :title="'JVM监控'"
          :chartTitle="'JVM内存使用率'"
          :percent="cpu.percent"
        ></SystemInfoChart>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { psutilinfo } from "@/api/systeminfo";

import SystemInfoChart from "./chart.vue";
import NetInfoCom from "./netinfo.vue";

let systemInfoTimer = null;

export default {
  name: "Systeminfo",
  components: { SystemInfoChart, NetInfoCom },
  data() {
    return {
      loading: false,
      net: {
        bytesRecv: 0,
        bytesSent: 0,
      },
      disk: { percent: 0 },
      host: { percent: 0, total: 0, used: 0 },
      mem: { percent: 0, total: 0, used: 0 },
      cpu: {
        cnt: 0,
        logicalCnt: 0,
        modeName: "",
        percent: 0,
        physicalCnt: 0,
      },
    };
  },

  mounted() {
    this.getData();
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer();
  },
  methods: {
    startTimer() {
      if (systemInfoTimer) {
        clearInterval(systemInfoTimer);
      }

      systemInfoTimer = setInterval(() => {
        this.getData();
      }, 60 * 1000);
    },
    stopTimer() {
      if (systemInfoTimer) {
        clearInterval(systemInfoTimer);
      }
    },
    getData() {
      this.loading = true;

      psutilinfo()
        .then((res) => {
          const { net, cpu, host, disk, mem } = res.data || {};
          this.net = net || {};
          this.cpu = cpu || {};
          this.host = host || {};
          this.disk = disk || {};
          this.mem = mem || {};

          this.cpu.percent = parseFloat(cpu.percent || 0).toFixed(4);
          this.disk.percent = parseFloat(disk.percent || 0).toFixed(4);
          this.mem.percent = parseFloat(mem.percent || 0).toFixed(4);
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style lang="scss">
.system-info-page {
  // background-color: #f0f2f5;
  .system-info-chart {
    background-color: rgba(101, 164, 249, 0.3);

    .system-info-title {
      text-align: center;
      height: 45px;
      line-height: 45px;
      color: #fff;
      border-bottom: 1px solid #445e7f;
      border-radius: 6px;
    }

    .system-info-echart {
      padding-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

<style lang="scss" scoped>
.system-info-item {
  margin-top: 20px;

  .system-info-title1 {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    border-bottom: 1px solid #445e7f;
    background-color: rgba(101, 164, 249, 0.3);
  }
  .system-info-content {
    padding: 20px 10px;
    background-color: rgba(101, 164, 249, 0.3);
  }
}
</style>
